<template>

  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>专业负责人</el-breadcrumb-item>
      <el-breadcrumb-item>学期管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入学期名称" clearable @clear="getUserList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-button style="position: absolute; right: 720px" type="" @click="addDialogVisible=true">添加学期</el-button>
      </el-form>



      <el-dialog title="添加学期" :visible.sync="addDialogVisible" width="40%" @close="addDialogClose">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">

          <el-form-item label="学期名称" prop="termname">
            <el-select v-model="addForm.termname" >
              <el-option label="大一（上）" value="大一（上）"></el-option>
              <el-option label="大一（下）" value="大一（下）"></el-option>
              <el-option label="大二（上）" value="大二（上）"></el-option>
              <el-option label="大二（下）" value="大二（下）"></el-option>
              <el-option label="大三（上）" value="大三（上）"></el-option>
              <el-option label="大三（下）" value="大三（下）"></el-option>
              <el-option label="大四（上）" value="大四（上）"></el-option>
              <el-option label="大四（下）" value="大四（下）"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学期描述" prop="termdes">
            <el-input v-model="addForm.termdes" placeholder="暂无"></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCourseBase">确 认</el-button>
        </div>
      </el-dialog>



      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">

        <el-table-column prop="termname" label="学期名称" width="380" align="center">
        </el-table-column>
        <el-table-column prop="termdes" label="学期描述" width="380" align="center">
        </el-table-column>
        <el-table-column prop="ords" label="次序" v-if="false" width="380" align="center">
        </el-table-column>

        <el-table-column label="修改  /  删除" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑学期" placement="top-start">
              <el-button  icon="el-icon-edit" circle @click="editCourse(scope.row.termname)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除学期" placement="top-start">
              <el-button type="" icon="el-icon-delete" circle @click="deleteCourse(scope.row.termname)"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>


        <el-table-column label="管理学期内课程" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑学期课程信息" placement="top-start">
              <el-button  icon="el-icon-s-fold" circle @click="showCourse(scope.row.termname,scope.row.ords)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>



      </el-table>





      <el-dialog title="修改学期" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose" append-to-body = "true">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">

          <el-form-item label="学期描述" prop="termdes">
            <el-input v-model="editForm.termdes" style="" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCourseInfo">修 改</el-button>
        </div>
      </el-dialog>


    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>

</template>


<script>
  export default {

    created(){
      this.getCourseList();
    },
    data() {
      return {
        queryInfo:{
          query:'',//查询信息
          role:this.$session.get('bull'),
          pageNum:1,
          pageSize:4
        },
        List:[],
        TermList:[] = [{termname:"大一（上）"},{termname:"大一（下）"},{termname:"大二（上）"},{termname:"大二（下）"},
          {termname:"大三（上）"},{termname:"大三（下）"},{termname:"大四（上）"},{termname:"大四（下）"}],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,

        addForm:{
          termname:'',
          termdes:'',
          ords:'',

        },
        editForm:{
          termdes:'',
        },

        addFormRules: {
          termname:[
            { required: true, message:'请选择学期名', trigger: 'blur' },
          ],

          ords:[
            { required: true, message:'请选择学期次序', trigger: 'blur' },
          ],
        },

        editFormRules: {
          termdes: [
            { required: true, message: '请输入描述', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ]
        },


      }
    },


    methods: {
      async getCourseList () {
        const { data: res } = await this.$http.get("ProfesTerms/AllProfesTerm", { params: this.queryInfo })
        this.List = res.data;
        this.total = res.numbers;
      },
      showCourse (termname,ords) {
        this.$session.set("termname",termname);
        this.$session.set("ords",ords);
        this.$router.push({path:'/Sub_Sinfo'});
      },


      editCourseInfo () {
        this.$refs.editFormRef.validate(async valid => {
          console.log(valid);
          if (!valid) return;

          const { data: res } = await this.$http.put("ProfesTerms/ProfesTerm", this.editForm);
          console.log(res);
          if (res !== "success") return this.$message.error("修改失败");
          this.$message.success("修改成功");

          this.editDialogVisible = false;
          this.getCourseList();
        });
      },
      async editCourse(termname){
        const {data:res} = await this.$http.get("ProfesTerms/ProfesTermMessage?termname="+termname);
        this.editForm = res;
        this.editDialogVisible = true;
      },
      async deleteCourse (termname) {

        const confirmResult = await this.$confirm('是否删除该学期？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return ;
        }
        const { data: res } = await this.$http.delete("ProfesTerms/ProfesTerm?termname=" + termname);
        if (res !== "success") {
          return this.$message.error("删除失败");
        }
        this.$message.success("删除成功");
        this.getCourseList();
      },
      addCourseBase () {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return;

          for(var i = 0;i < this.TermList.length;i++){
            if(this.addForm.termname == this.TermList[i].termname){
              this.addForm.ords = i + 1;
            }
          }

          const { data: res } = await this.$http.post("ProfesTerms/ProfesTerm", this.addForm);
          if (res !== "success") {
            return this.$message.error("请不要重复添加学期!")
          }
          this.$message.success("添加成功！")
          this.addDialogVisible = false;
          this.getCourseList();
        })
      },

      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
    }
  }
</script>




<style scoped>
  .searchForm{
    margin-top: 40px;
  }
</style>
